<template>
  <div
    id="main"
    ref="chart"
    :style="{
      width: '100%',
      height: '400px',
    }"
  ></div>
</template>

<script>
import * as zrender from "zrender";
import { getData, getOption } from "./config.js";
import {
  getCircle,
  // getImage,
  getLine,
  // getText,
} from "./utils/getBasicChart.js";
import Axis from "./utils/axis.js";

export default {
  data() {
    return {
      data: getData(),
      config: "",
      scatter: null,
      width: "",
      height: "",
      xAxis: "",
      yAxis: "",
      select: "a",
      averagePrecnet: 50,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      const dom = this.$refs.chart;
      this.width = dom.clientWidth;
      this.height = dom.offsetHeight;
      this.config = getOption({
        width: this.width,
        height: this.height,
      });
      this.scatter = new zrender.init(dom);
      this.getAxisChart(this.scatter);
      this.getCircleChart(this.scatter);
      this.getLineChart(this.scatter);
    },
    getAxisChart(scatter) {
      this.xAxis = new Axis(this.config.xAxis, this.data);
      this.yAxis = new Axis(this.config.yAxis, this.data);
      scatter.add(this.xAxis);
      scatter.add(this.yAxis);
    },
    getCircleChart(scatter) {
      this.data.forEach((item) => {
        const isSelect = item[0] === this.select ? true : false;
        const posX = this.xAxis.scale.get(item[1]);
        const posY = this.yAxis.scale.get(item[2]);
        const circle = getCircle({
          cx: this.width / 2,
          cy: this.height / 2,
          z: isSelect ? 1 : 0,
          lineWidth: 0,
          r: 0,
          fill: isSelect ? "#FF834A" : "#5B91FC ",
        });
        circle
          .animate("shape", false)
          .when(1000, {
            cx: posX,
            cy: posY,
            r: 10,
            lineWidth: 3,
          })
          .start();
        scatter.add(circle);
      });
    },
    getLineChart(scatter) {
      const line = getLine({
        x1: this.xAxis.scale.get(0),
        y1: this.yAxis.scale.get(this.averagePrecnet),
        x2:this.config.xAxis.length + this.config.xAxis.start[0],
        y2: this.yAxis.scale.get(this.averagePrecnet),
        lineDash: [5, 5],
        percent: 0,
      })
      line.animate("shape", false)
          .when(1000, {
            percent: 1,
          })
          .start();
      scatter.add(line);
    },
  },
};
</script>

<style scoped>
#main {
  /* background: #000000; */
}
</style>
